<template>
    <div class="list-wrap">
        <flexbox justify="space-between" style="height: 32px; line-height: 32px; padding: 0 16px; overflow: hidden">
            <div style="flex: 1; min-width: 20px">
                <HToolTip :title="`未排期 ${total}`">
                    <span>未排期</span>
                    <span style="margin-left: 4px; font-weight: 500; color: #172b4d">{{ total }}</span>
                </HToolTip>
            </div>
            <flexbox style="flex-shrink: 0">
                <HDicSelect type="requireType" size="small" title="需求类型" v-model:value="form.requireType" style="margin-right: 4px" />
                <HDicSelect type="level" size="small" title="优先级" v-model:value="form.level" />
                <HSuggestInputSearch
                    size="small"
                    allowClear
                    placeholder="请输入需求名称"
                    style="flex-shrink: 1; margin: 0 4px; width: 120px"
                    @change="handleSearch"
                    v-if="isCollaspeTask"
                />
                <a-select style="min-width: 80px" size="small" v-model:value="form.sortColumn" v-if="isCollaspeTask">
                    <a-select-option :value="null">全部</a-select-option>
                    <a-select-option value="create_time">按创建时间</a-select-option>
                    <a-select-option value="update_time">按更新时间</a-select-option>
                </a-select>
            </flexbox>
        </flexbox>
        <div
            v-infinite-scroll="getList"
            infinite-scroll-watch-disabled="scrollDisabled"
            :infinite-scroll-distance="100"
            class="margin-t-8"
            ref="requireListARef"
            style="flex: 1; flex-shrink: 0; overflow-y: auto; padding: 0 8px"
        >
            <div
                class="workbench-require-card-item"
                v-for="(item, index) of list"
                :key="item.id"
                style="background: #fff"
                @click="showDetail(item.id)"
            >
                <flexbox>
                    <flexbox style="flex: 1; overflow: hidden">
                        <div style="flex-shrink: 0; margin-left: 4px; width: 16px">
                            <div class="show-icon">
                                <my-icon type="icondrag" />
                            </div>
                        </div>
                        <div style="width: 12px; flex-shrink: 0">
                            <a-tooltip title="未关联业务需求">
                                <a-badge status="error" v-if="!item.relateRequireId" />
                            </a-tooltip>
                        </div>
                        <a-tag style="flex-shrink: 0; border-radius: 12px; background: #fff" v-if="item.level">
                            <HLevel :level="item.level" />
                        </a-tag>
                        <HProductType :type="$filters.valToNameFilter('requireType', item.requireType)" style="flex-shrink: 0" />
                        <HToolTip :title="item.requireName">
                            <span style="color: #172b4d; margin-left: 4px">{{ item.requireName }}</span>
                        </HToolTip>
                    </flexbox>
                    <div
                        @click.stop="handleDeleteItem(index)"
                        class="delete-cont"
                        style="
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 22px;
                            height: 22px;
                            margin-right: 12px;
                            cursor: pointer;
                        "
                    >
                        <my-icon type="icondelete" />
                    </div>
                </flexbox>
            </div>
            <LoadMoreTip :isLoadMore="loading && query.pageNum > 1" :isNoMore="!!(list.length && total === list.length)" style="margin-bottom: 8px" />
        </div>
    </div>
</template>

<script lang="ts">
import { AlertOutlined } from '@ant-design/icons-vue';
import api from '@/api';
import store from '@/store';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import { useMessage } from '@/hooks/common/useMessage';
import HToolTip from '@/components/HToolTip/index.vue';
import LoadMoreTip from '@/components/Content/LoadMoreTip.vue';
import { HLevel, HProductType, HDicSelect, HSuggestInputSearch } from '@/components';
import { useSortable } from '@/hooks/common/useSortable';
import { defineComponent, ref, unref, reactive, toRefs, nextTick, watch, getCurrentInstance } from 'vue';
export default defineComponent({
    components: {
        HToolTip,
        HLevel,
        HProductType,
        HDicSelect,
        HSuggestInputSearch,
        AlertOutlined,
        LoadMoreTip
    },
    props: {
        system: {
            type: Number,
            default: null
        },
        isCollaspeTask: {
            type: Boolean,
            default: false
        }
    },
    setup(props) {
        const instance: any = getCurrentInstance();
        const router = useRouter();
        const requireListARef = ref<any>();
        const state = reactive<any>({
            list: [],
            scrollDisabled: false,
            total: 0,
            query: {
                pageNum: 1,
                pageSize: 10,
                selectType: 'workbench',
                isScheduled: 0,
                admin: 1,
                mySelf: 1,
                relateRequireId: '',
                requireSystem: ''
            },
            form: {
                level: null,
                requireType: null,
                requireName: null,
                sortColumn: null,
                sortRole: 'desc'
            },
            loading: false
        });
        const getList = async (isRefresh = false) => {
            if (state.scrollDisabled) {
                return;
            }
            state.loading = true;
            state.scrollDisabled = true;
            // 刷新值
            if (isRefresh) {
                const pageSize = state.query.pageNum * state.query.pageSize;
                const { success, moule, totalCount } = await api.productRequireModel.selectPage({
                    ...state.query,
                    pageNum: 1,
                    pageSize
                });
                if (success) {
                    state.list = [...moule];
                    state.total = totalCount;
                }
            } else {
                const { success, moule, totalCount } = await api.productRequireModel.selectPage(state.query);
                if (success) {
                    if (state.query.pageNum === 1) {
                        state.list = [...moule];
                    } else {
                        state.list = [...state.list, ...moule];
                    }
                    if (moule.length === state.query.pageSize) {
                        state.query.pageNum++;
                        state.scrollDisabled = false;
                    } else {
                        state.scrollDisabled = true;
                    }
                    state.query.pageSize = 10;
                    state.total = totalCount;
                }
            }
            state.loading = false;
        };
        const handleDeleteItem = (index) => {
            const { id, requireName } = state.list[index];
            const { createConfirm } = useMessage();
            createConfirm({
                title: `确认删除【${requireName}】?`,
                iconType: 'danger',
                onOk: async () => {
                    const query = {
                        id
                    };
                    const { success, errorMsg } = await api.productRequireModel.delete(query);
                    if (success) {
                        message.success('删除成功');
                        state.list.splice(index, 1);
                        --state.total;
                    } else {
                        message.error(errorMsg);
                    }
                }
            });
        };
        const showDetail = (id) => {
            router.push({
                path: '/productRequire/productDetail',
                query: {
                    id
                }
            });
        };
        const handleSearch = (val) => {
            state.form.requireName = val;
        };
        const initSortable = () => {
            nextTick(() => {
                const { initSortable } = useSortable(unref(requireListARef), {
                    sort: false,
                    group: {
                        name: 'requireList',
                        pull: true,
                        put: false
                    },
                    filter: '.disabled', // 禁止拖拽
                    onStart: (e) => {
                        store.commit('user/SET_MOVEDATA', state.list[e.oldIndex]);
                    }
                });
                initSortable();
            });
        };
        initSortable();
        // 更新该业务需求下的产品需求
        instance.proxy.$mitt.on('refreshList', (query, isRefresh = false) => {
            state.scrollDisabled = false;
            if (isRefresh) {
                getList(isRefresh);
            } else {
                state.query = {
                    ...state.query,
                    ...query,
                    pageNum: 1
                };
                getList();
            }
        });
        watch(
            () => props.system,
            (n) => {
                state.scrollDisabled = false;
                state.query.pageNum = 1;
                state.query.requireSystem = n;
                getList();
            },
            { immediate: true }
        );
        watch(
            () => state.form,
            (n) => {
                state.scrollDisabled = false;
                state.query = {
                    ...state.query,
                    pageNum: 1,
                    relateRequireId: null,
                    ...n
                };
                getList();
            },
            { deep: true }
        );
        return {
            handleDeleteItem,
            requireListARef,
            ...toRefs(state),
            getList,
            showDetail,
            handleSearch
        };
    }
});
</script>

<style scoped lang="less">
.list-wrap {
    display: flex;
    flex-direction: column;
}
</style>